<template>
    <div class="number-box">

        <div class="number-box-minus" :class="{'number-box-disabled': disableSubtract}" @click="calcValue('subtract')">
            -
        </div>
        <input class="number-box-value" :readonly="readonly" type="number" :disabled="disabled" v-model="inputValue" @blur="onBlur" @focus="inputFocus">
        <div class="number-box-plus" :class="{'number-box-disabled': disableAdd}" @click="calcValue('add')">+</div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Emit, Model} from "vue-property-decorator";

    @Component({})
    //数字输入框
    export default class NumberBox extends Vue {
        //是否禁用,可用值`true` /`false`
        @Prop({default: false, type: Boolean})
        private disabled!: boolean;
        //是否禁用,可用值`true` /`false`
        @Prop({default: false, type: Boolean})
        private readonly!: boolean;
        //最小值
        @Prop({default: -Infinity, type: Number})
        public min!: number;
        //最大值
        @Prop({default: Infinity, type: Number})
        public max!: number;
        //步进
        @Prop({default: 1, type: Number})
        public step!: number;

        //默认值
        @Model("change", {type: Number})
        public value!: number;

        private inputValue: number = this.value;

        @Watch("value")
        private watchValue(newVal: number): void {
            this.inputValue = newVal;
        }

        //数字输入框内容发生改变
        //@arg n:当前数值
        @Watch("inputValue")
        @Emit("change")
        private watchInputValue(newVal: number): void {
        }


        private get disableSubtract(): boolean {
            return this.value <= this.min;
        }

        private get disableAdd(): boolean {
            return this.value >= this.max;
        }

        private calcValue(type: string): any {
            if (!this.disabled) {
                const scale = this.getDecimalScale();
                let value = this.inputValue * scale;
                let step = this.step * scale;

                if (type === "subtract") {
                    value -= step;
                    this.clickSub();
                } else if (type === "add") {
                    value += step;
                    this.clickAdd();
                }
                if (value < this.min || value > this.max) {
                    return;
                }
                this.inputValue = value / scale;
            }
        }

        private getDecimalScale(): number {
            let scale = 1;
            // 浮点型
            if (~~this.step !== this.step) {
                scale = Math.pow(10, (this.step + "").split(".")[1].length);
            }
            return scale;
        }

        @Emit("focus")
        private inputFocus(): any {

        }

        @Emit("blur")
        private inputBlur(): any {

        }

        @Emit("clickAdd")
        private clickAdd() {
        }

        @Emit("clickSub")
        private clickSub() {
        }

        private onBlur(event: any): void {
            let value = event.target.value;
            if (!value) {
                this.inputValue = 0;
                return;
            }
            value = +value;
            if (value > this.max) {
                value = this.max;
            } else if (value < this.min) {
                value = this.min;
            }
            this.inputValue = value;
            this.inputBlur();
        }
    }
</script>

<style scoped lang="stylus">
    .number-box
        display flex;
        flex-direction row;
        justify-content flex-start;
        height 32.5px;

        .number-box-minus,
        .number-box-plus
            margin 0;
            background-color #f6f6f6;
            width 32.5px;
            height 100%;
            line-height 32.5px;
            text-align center;
            color #555555;
            font-size 16px;
            display flex;
            align-items center;
            justify-content center;


        .number-box-value
            margin 0 2px;
            background-color #f6f6f6;
            width 40px;
            height 100%;
            text-align center;
            font-size 14px;

            &:focus
                border 0 solid #fff
                outline: none
                box-shadow 0 0 0 #fff;


        .number-box-disabled
            color #ccc;
            background #fbfbfb;

</style>
